<template>
  <div>
    <div class="contact-service">
      <el-button @click="userFeedback" icon="el-icon-edit-outline">用户反馈</el-button>
      <el-button @mouseenter.native="showQRCode = true" @mouseleave.native="showQRCode = false"
                 @click="showQRCodeModal = true" icon="el-icon-s-check">人工服务
      </el-button>

      <!-- 模态框容器 -->
        <div v-if="showQRCode" class="qrcode-preview">
          <!-- 显示二维码图片 -->
<!--          <p style="text-align: center;font-weight: bold;">点击扫码</p>-->
          <img src="http://zjdownload.xyhelp.cn/prod-api/apis/user/get/customService/QR" alt="二维码" class="qrcode-img"/>
        </div>


      <el-button v-show="showBackToTop" @click="scrollToTop" icon="el-icon-top">返回顶部</el-button>
    </div>


<!--    中间的扫码组件-->
    <div v-if="showQRCodeModal" class="qrcode">
      <p style="font-weight: bold;margin-top: 15px">扫描二维码，立即接入人工服务</p>

      <!-- 模态框容器 -->
      <div class="qrcode-modal">
        <!-- 关闭按钮 -->
        <el-button type="text" class="close-btn" @click="closeQRCodeModal" icon="el-icon-close"></el-button>
        <!-- 显示二维码图片 -->
        <img class="qrcode-imgs" src="http://zjdownload.xyhelp.cn/prod-api/apis/user/get/customService/QR" alt="二维码"/>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'ContactService',
  data() {
    return {
      showBackToTop: false, // 控制Back to Top按钮的显示
      // 控制二维码显示的布尔值
      showQRCode: false,
      showQRCodeModal: false,
    }
  },
  mounted() {
    // 添加滚动事件监听
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动事件监听
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    closeQRCodeModal() {
      this.showQRCodeModal = false
    },
    // 实现用户反馈的逻辑
    userFeedback() {
      this.$router.push({
        name: 'FeedBack',
      })
    },
    // 监听滚动事件
    handleScroll() {
      // 检查是否滚动到页面底部
      if (window.scrollY > 300) {
        this.showBackToTop = true;
      } else {
        this.showBackToTop = false;
      }
    },
    // 滚动到页面顶部
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动
      });
    }
  }
}
</script>

<style>
.contact-service {
  position: fixed;
  right: 0;
  top: 40%;
  display: flex;
  flex-direction: column;
  width: 64px; /* 正方形尺寸 */
  height: 64px;
}

.contact-service .el-button {
  width: 100%; /* 使按钮宽度填满父容器 */
  height: 64px; /* 设置按钮高度与父容器相同 */
  box-sizing: border-box; /* 确保padding包含在高度内 */
  margin: 0;
  padding: 10px; /* 根据需要调整内边距 */
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中内容 */
  font-size: 13px; /* 根据需要调整字体大小 */
  background-color: white;
  border: none; /* 不需要边框，设置为none */
}

.contact-service .el-button [class*="el-icon-"] {
  margin-bottom: 5px; /* 图标和文本之间的间距 */
  font-size: 22px; /* 图标大小 */
}

/* 添加按钮之间的间隔 */
.contact-service .el-button:not(:last-child) {
  margin-bottom: 3px; /* 设置按钮之间的间隔 */
}

.qrcode {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.qrcode-modal {
  margin: 15px;
  text-align: center;
  align-items: center;
}

.close-btn {
  position: absolute; /* 绝对定位 */
  top: 5px; /* 距离顶部10px */
  right: 10px; /* 距离右边10px */
  z-index: 1001; /* 确保关闭按钮在模态框内容的上方 */
  border: none;
  font-size: 18px;
  color: black;
}

.qrcode-img {
  width: 100%;
  height: 100%;
}

.qrcode-imgs {
  width: 150px;
  height: 150px;
}

.qrcode-preview {
  display: none; /* 初始不显示，通过v-if控制显示 */
  position: absolute;
  right: 88px;
  top: 30%;
  width: 180px;
  height: 180px;
  background-color: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px;
  box-sizing: border-box;
}

.qrcode-preview.active {
  display: flex; /* 通过类名控制显示 */
}
</style>
